<template>
  <div>
    <a-table
      :columns="columns"
      :rowKey="record => record.uuid"
      :dataSource="feedbacks"
      size="middle"
      bordered>
      <!--自定义时间-->
      <template slot="fromNow" slot-scope="text, record, index">
        <span :title="moment(record.createAt).format('YYYY-MM-DD HH:MM:ss')">{{ text }}</span>
      </template>
      <!--自定义状态-->
      <template slot="status" slot-scope="text, record, index">
        <a-icon type="check-circle" style="color: #87d068;font-size: 20px" v-if="record.status"/>
        <a-icon type="close-circle" style="color: orange;font-size: 20px" v-else/>
      </template>
      <!--自定义操作-->
      <template slot="operation" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <a-button size="small"
                    ghost
                    type="primary"
                    @click="editFeedback(record)"
                    shape="round">处理</a-button>
          <a-popconfirm :title="`确认删除 `+record.email+ ` ?`" @confirm="deleteFeedback(record)">
            <a-button size="small" ghost type="danger" shape="round">删除</a-button>
          </a-popconfirm>
        </div>
      </template>

    </a-table>
  </div>
</template>

<script>
  import app from "../../../../app";
  import moment from "moment";
  moment.locale("zh-CN");
  export default {
    name: "feedbacks",
    layout: "admin",
    head: ()=>({ title: `反馈列表 - ${app.name}` }),
    async asyncData({$axios, store, error }) {
      let url = `${app.api}/api/${app.apiVersion}/admin/feedbacks/`;
      const resp = await $axios.$get(url);
      let feedbacks = resp.code === 200 ? resp.data : [];
      feedbacks.forEach((item)=>{
        let time = item.createAt;
        item.fromNow = moment(time).fromNow();
        if (item.type === 0) {
          item.type = "建议"
        }else if (item.type === 1){
          item.type = "需求"
        }else {
          item.type = "Bug"
        }
      });
      return { feedbacks }
    },
    data: ()=>({
      moment,
      loading: false,
      pagination: {

      },
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: '5%',
          scopedSlots: { customRender: 'id' },
        },
        {
          title: '创建日期',
          dataIndex: 'fromNow',
          width: '8%',
          scopedSlots: { customRender: 'fromNow' },
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: '5%',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '类型',
          dataIndex: 'type',
          width: '5%',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          width: '8%',
          scopedSlots: { customRender: 'email' },
        },
        {
          title: '内容',
          dataIndex: 'content',
          width: '40%',
          scopedSlots: { customRender: 'content' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    }),
    methods: {
      editFeedback(record){

      },
      deleteFeedback(record){
        let url = `${app.api}/api/${app.apiVersion}/admin/feedback/`;
        this.$axios.$delete(url, { data: { uuid: record.uuid } })
          .then((resp)=>{
            if (resp.code === 200) {
              const index = this._data.feedbacks.indexOf(record);
              this._data.feedbacks.splice(index, 1);
              this.$message.success(resp.msg)
            }else {
              this.$message.warning(resp.msg)
            }
          }).catch((error)=>{

        })
      }
    }
  }
</script>

<style scoped>

</style>
